<template>
  <div :class="className" :style="style">
    <slot name="before"></slot>
    <slot></slot>
    <app-flex-body v-if="slots.body || slots.flex">
      <slot name="body"></slot>
      <slot name="flex"></slot>
    </app-flex-body>
    <slot name="after"></slot>
  </div>
</template>
<script setup>
const slots = useSlots()

const props = defineProps({
  title: String,
  vertical: Boolean, // 垂直排列
  fill: Boolean, // 铺满
  end: Boolean, // 结束位置对齐
  padding: Number | String,
  center: Boolean,
})

const className = computed(() => {
  return {
    'app-flex': true,
    'app-flex--vertical': props.vertical,
    'app-flex--fill': props.fill,
    'app-flex--end': props.end,
    'app-flex--center': props.center,
  }
})

const style = computed(() => {
  let padding = props.padding

  // 只启用属性，未传值时，使用默认值
  if (padding != undefined && padding == '') padding = 'var(--gutter)'

  return {
    padding: typeof padding === 'number' ? `${padding}px` : padding,
  }
})
</script>
<style lang="scss" scoped>
.app-flex {
  display: flex;
}

.app-flex--vertical {
  flex-direction: column;
}

.app-flex--fill {
  flex: 1;
  overflow: hidden;
}
.app-flex--center {
  align-items: center;
}

.app-flex--end {
  justify-content: flex-end;
}
</style>
